import Taro, {Component} from '@tarojs/taro'
import {View, Swiper, SwiperItem, Image} from '@tarojs/components'
import classNames from 'classnames'
import PropTypes from 'prop-types';
import './index.scss'

class MySwiper extends Component {


  constructor(props) {
    super(props)
  }

  static options = {
    addGlobalClass: true
  }


  static propTypes = {
    imgUrls: PropTypes.array
  };

  static defaultProps = {
    imgUrls: []
  }

  config = {
    navigationBarTitleText: ''
  }

  state = {
    currentIndex: 0
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  componentCatchError() {
  }

  clickImage(item) {
    this.props.onClickImage(item)
  }

  componentWillReceiveProps() {

  }


  swiperChange(e) {
    console.log('e.detail.current', e.detail.current)
    this.setState({
      currentIndex: e.detail.current
    });
  }

  render() {
    const {imgUrls} = this.props
    const {currentIndex} = this.state
    return (
      <View>
        {/* {
          imgUrls && imgUrls.map((item,index)=>(
              <View>{item.bannerImage.url}</View>
            ))
        } */}
        {/* {
          JSON.stringify(imgUrls)
        } */}
        {/* previousMargin={'100px'} nextMargin={'100px'} */}
        {/* previousMargin={Taro.pxTransform('100')} nextMargin={Taro.pxTransform('100')} */}
        {
          imgUrls.length == 0 &&
          <View className="swiper-block"></View>
        }
        {
          imgUrls.length > 0 &&
          <Swiper
            indicatorDots={false}
            autoplay={false}
            interval={2500}
            indicatorColor={'#8a8a8a'}
            indicatorActiveColor={'#333'}
            circular
            onChange={this.swiperChange.bind(this)}
            current={currentIndex}
            className="swiper-block"
            previousMargin={'50px'} nextMargin={'50px'}
          >
            {/* className="swiper-block" */}
            {
              imgUrls.map((item, index) => (
                <SwiperItem className="swiper-item">
                  <Image mode="aspectFill" src={item.files && item.files[0] ? item.files[0].url : item.bannerImage.url}
                         className={classNames('slide-image', currentIndex == index ? 'active' : 'common')}
                         onClick={this.clickImage.bind(this, item)} webp/>
                </SwiperItem>
              ))
            }
          </Swiper>
        }


        <View className="dots-box own-class">
          {
            imgUrls && imgUrls.map((item, index) => (
              <View className={classNames("dots", currentIndex == index ? 'bg-333' : '')} key={item.id}></View>
            ))
          }
        </View>

      </View>
    )
  }
}

export default MySwiper
